<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    width="50%"
    title="消息列表"
    @ok="handleSubmit"
  >
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
      <a-tab-pane tab="未读" key="0">
        <BasicTable @register="registerTable0">
          <template #title="{ record, text }">
            <a @click="openDetail(record, true)">{{ text }}</a>
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane tab="已读" key="1">
        <BasicTable @register="registerTable1">
          <template #title="{ record, text }">
            <a @click="openDetail(record, false)">{{ text }}</a>
          </template>
        </BasicTable>
      </a-tab-pane>
    </a-tabs>
    <MsgDetailModal @register="registerDetailModal" />
  </BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { myMsg, read } from '@/api/sys/sysNoticeManage';
import { BasicColumn, BasicTable, useTable } from '@/components/Table';
import { nextTick, ref } from 'vue';
import MsgDetailModal from '@/components/BusComponents/MsgDetailModal.vue';
const [registerModal] = useModalInner(async () => {
  resetTabData();
});
const activeKey = ref('0');
const resetTabData = () => {
  activeKey.value = '0';
  reload0({
    searchInfo: {
      status: '0',
    },
  });
};
const columns: BasicColumn[] = [
  {
    title: '标题',
    dataIndex: 'title',
    width: 200,
    // customRender: ({ record }) =>
    //     h(
    //       'a',
    //       {
    //         onClick: openDetail(record),
    //       },
    //       12313
    //     ),
    slots: {
      customRender: 'title',
    },
  },
  {
    title: '摘要',
    dataIndex: 'msgAbstract',
    width: 200,
  },
  {
    title: '发送时间',
    dataIndex: 'sendTime',
    width: 200,
  },
];
const [registerTable0, { reload: reload0 }] = useTable({
  rowKey: 'id',
  api: myMsg,
  immediate: false,
  columns,
});
const [registerTable1, { reload: reload1 }] = useTable({
  rowKey: 'id',
  api: myMsg,
  immediate: false,
  columns,
});
const [registerDetailModal, { openModal: openDetailModal }] = useModal();
const openDetail = async (record: Recordable, isRead: boolean) => {
  if (isRead) {
    await read(record.id);
    reloadTabData('0');
  }
  const { msgContent: content, title } = record;
  openDetailModal(true, {
    content,
    title,
  });
};
const reloadTabData = (activeKey: string) => {
  nextTick(() => {
    if (activeKey === '0') {
      reload0({
        searchInfo: {
          status: activeKey,
        },
      });
    } else {
      reload1({
        searchInfo: {
          status: activeKey,
        },
      });
    }
  });
};
const handleTabChange = (activeKey: string) => {
  reloadTabData(activeKey);
};
async function handleSubmit() {}
</script>
